﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Chromely</title>
    <link rel="stylesheet" href="../Content/css/bootstrap.min.css">
    <script src="../Content/js/jquery.min.js"></script>
    <script src="../Content/js/tether.min.js"></script>
    <script src="../Content/js/bootstrap.min.js"></script>
</head>
<body>
    <div class="col-9 centerBlock">
        <div class="row">
            <h5>Execute JavaScript Demo</h5>
        </div>
        <div class="row">
            Script:
        </div>
        <div class="row">
            <div class="row col-12">
                <textarea class="form-control" id="demoscript" rows="5"></textarea>
            </div>
        </div>
        <div class="row">
            <div class="row col-12">
                <button id="execute" type="button" class="btn btn-primary btn-sm" onclick="executeRun()" style="margin: 5px;">Execute</button>
                <button id="evaluate" type="button" class="btn btn-primary btn-sm" onclick="evaluateRun()" style="margin: 5px;">Evaluate</button>
            </div>
        </div>
        <div class="row col-12">
            <table id="resulttable" class="table table-striped" style="margin-top: 10px;">
                <thead>
                <tr>
                    <th scope="col" style="width: 100px;">Type</th>
                    <th scope="col">Output</th>
                </tr>
                </thead>
                <tbody>
                </tbody>
            </table>
        </div>
    </div>

<script>
    document.getElementById("demoscript").value = "(function() { var body = document.body, html = document.documentElement; return  Math.max( body.scrollHeight, body.offsetHeight, html.clientHeight, html.scrollHeight, html.offsetHeight ); })();";
    document.getElementById("demoscript").addEventListener("keyup", scriptUpdate);
    function scriptUpdate() {
        var content = document.getElementById("demoscript").value;
        if (content.length > 5) {
            $('#execute').removeClass('disabled');
            $('#evaluate').removeClass('disabled');
        } else {
            $('#execute').addClass('disabled');
            $('#evaluate').addClass('disabled');
        } 
    }

    function executeResult(res) {
        var jsonData = JSON.parse(res.ResponseText);
        if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
            var row = '<tr>';
            row += '<td>Execute</td>';
            row += '<td>' + jsonData.Data + '</td>';
            row += '</tr>';
            $('#resulttable tr:last').after(row);
        }
    }

    function executeRun() {
        var content = document.getElementById("demoscript").value;
        var postData = { "framename": "alldemoframe", "script": content };
        boundControllerAsync.postJson("/executejavascript/execute", null, JSON.stringify(postData), executeResult);
    }

    function evaluateResult(res) {
        var jsonData = JSON.parse(res.ResponseText);
        if (jsonData.ReadyState == 4 && jsonData.Status == 200) {
            var row = '<tr>';
            row += '<td>Evaluate</td>';
            row += '<td>' + jsonData.Data + '</td>';
            row += '</tr>';
            $('#resulttable tr:last').after(row);
        }
    }

    function evaluateRun() {
        var content = document.getElementById("demoscript").value;
        var postData = { "framename": "alldemoframe", "script": content };
        boundControllerAsync.postJson("/executejavascript/evaluate", null, JSON.stringify(postData), evaluateResult);
    }
</script>
</body>
</html>









